<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<navigator class="swiper-item" :url="`/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`">
					<image :src="item.image_src" mode=""></image>
				</navigator>
			</swiper-item>
		</swiper>
		
		<!-- 导航区 -->
		<view class="nav-list">
			<view class="nav-item" v-for="(item,index) in navList" :key="index">
				<image :src="item.image_src" mode=""></image>
			</view>
		</view>
		<!-- 楼层 -->
		<!-- 楼层标题 -->
		<view class="floor-list">
			<view class="floor-item" v-for="(item,index) in floorList" :key="index">
				<image class='floor-item-title' :src="item.floor_title.image_src"></image>
				<view class="floor-img-box">
					<navigator class="left-img-box" :url="item.product_list[0].url">
						<!-- 左边盒子放的大图片 floorList item【0】 1 直接渲染 -->
						<image :src="item.product_list[0].image_src" mode=""></image>
					</navigator>
					<view class="right-img-box">
						<!-- 左边盒子放的大图片 floorList item【非0】 4 v-for遍历渲染 -->
					<!-- 	第一张图片渲染重复 left当中渲染第一张 在right当中渲染
						第一张不显示  v-if 条件  下标为0的不显示 -->
						<navigator class="right-img-item" v-for="(item2,index2) in item.product_list" :key="index2" v-if="index2 !== 0" :url="item2.url" >
							<image class="right-item-img" :src="item2.image_src" mode=""></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {swiperdata,catitemsdata,floordata} from '@/api/home_request.js';
	export default {
		data() {
			return {
				//轮播图数据的初始值
				swiperList:[],
				//导航区的数据的初始值
				navList:[],
				//楼层数据
				floorList:[]
			};
		},
		onLoad(){
			this.getSwiperData();
			this.getCatitemsData();
			this.getFloorData()
		},
		methods:{
			//发送网络数据请求
			async getSwiperData(){
				const {data:res} =await swiperdata();
				// console.log(res);
				//res 相当于result.data
				// console.log(result.data);
				//在data当中设计初始值 在tempLate当中进行渲染
				//渲染res当中的message0
				if(res.meta.status !== 200) return uni.$showMsg();
				this.swiperList = res.message;
			},
			async getCatitemsData(){
				//1发送请求
				const {data:res} = await catitemsdata();
				// console.log(res);
				//2请求成功
				//3请求失败 reture并告诉用户数据请求失败
				if(res.meta.status !==200) return uni.$showMsg();
				//4成功给data当中的值赋值、
				this.navList = res.message;
			},
			//楼层的数据
			async getFloorData(){
				const {data:res} = await floordata();
				console.log(res);
				
				if(res.meta.status !==200) return uni.$showMsg();
				//给楼层数据当中的product_list 里头的每一项  url
				res.message.forEach(floor=>{
					floor.product_list.forEach(prod=>{
						prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1];
					})
				})
				this.floorList = res.message;
			},
		}
	
	}
</script>

<style lang="scss">
swiper{
	 height: 340rpx;
	 .swiper-item,image{
	  width: 100%;
	  height: 100%;
	 }
	}
	.nav-list{
	 display: flex;
	 justify-content: space-around;
	 margin: 30rpx 0;
	 .nav-item{
	  width: 130rpx;
	  height: 140rpx;
	  image{
	   width: 100%;
	   height: 100%;
	  }
	 }
	}
	.floor-list{
	 .floor-item{
	  margin-left: 10rpx;
	  margin-bottom:10rpx;
	  .floor-item-title{
	   width:100% ;
	   height: 60rpx;
	  }
	  .floor-img-box{
	   display: flex;
	   height: 400rpx;
	   .left-img-box{
		width: 33%;
		image{
		 width: 100%;
		 height: 100%;
		}
	   }
	   .right-img-box{
		width: 66%;
		display: flex;
		flex-wrap: wrap;
		.right-img-item{
		 width: 48%;
		 .right-item-img{
		  width: 100%;
		  height: 100%;
		 }
		}
	   }
	  }
	  
	 }
}

</style>
